<template>
  <section class="header">
    <b-container>
        <b-navbar toggleable="md" >
            <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
            <b-navbar-brand href="/">
                <img class="logo" src="~assets/images/logo.png"/>
            </b-navbar-brand>
            <b-collapse is-nav id="nav_collapse">
                <b-navbar-nav class="ml-auto">
                    <b-nav-item v-for="(item,index) in navitem" :href="item.url" :key="index" :active="$route.name == item.name">{{item.title}}</b-nav-item>
                </b-navbar-nav>
                <!-- <div class="header-user">
                    <img src="~/assets/images/img1.jpg" alt="">
                </div> -->
            </b-collapse>
        </b-navbar>
    </b-container>
  </section>
</template>

<script>
export default {
    data(){
        return {
            activeindex:0,
            navitem:[
                {title:'首页',url:'/',name:'index'},
                {title:'游记',url:'/list',name:'list'},
                // {name:'订单',url:'#'},
            ]
        }
    }
}
</script>

<style lang="less">
.header{
    width:100%;
    border-bottom: 1px solid #eee;
    .logo{
        width:100px;
    }
    .navbar-dark .navbar-toggler{
        color:#333;
    }
    .navbar-expand-md .navbar-nav .nav-item{
        margin:0 10px;
    }
    .navbar-light .navbar-nav .nav-link{
        color:#333;
        display: inline-block;
    }
    .navbar-light .navbar-nav .nav-link.active{
        color:#e1bf00;
        border-bottom: 2px solid #e1bf00;
    }
    .header-user{
        img{
            width:40px;
            height:40px;
            border-radius:50%;
            cursor: pointer;
        }
    }
}
</style>


